<template>
  <div class="layout">
    <div class="layout-top">
      <div class="layout-top-left">
        <div class="layout-top-logo"></div>
        <div class="layout-top-title">第五届全国智力运动会成绩信息发布系统</div>
      </div>
      <div class="layout-title-right">
        <div class="time">2023年10月26日-11月04日</div>
        <div class="address">安徽-合肥</div>
      </div>
    </div>
    <div class="layout-content">
      <!-- <div class="content-top">
        <el-tabs v-model="tabActive" type="card" @tab-click="handleClick">
          <el-tab-pane label="赛程赛果" name="scheduel">赛程赛果</el-tab-pane>
          <el-tab-pane label="代表团成绩" name="result">代表团成绩</el-tab-pane>
          <el-tab-pane label="运动员" name="athelete">运动员</el-tab-pane>
        </el-tabs>
      </div> -->
      <el-row :gutter="24">
        <el-col :span="20" class="col-20-menu">
          <el-menu
            :default-active="defaultActive"
            mode="horizontal"
            @select="handleSelect"
            background-color="#26a85e"
            text-color="#fff"
            active-text-color="#ffffff"
            router
          >
            <el-menu-item index="/overview" class="menu-item">
              总日程
            </el-menu-item>
            <el-menu-item index="/daily" class="menu-item">
              单日赛程
            </el-menu-item>
            <el-menu-item index="/item" class="menu-item">
              单项赛程
            </el-menu-item>
            <!-- <el-submenu index="/scheduel">
          <template slot="title">赛程赛果</template>
          <el-menu-item index="/overview">总日程</el-menu-item>
          <el-menu-item index="/daily">单日赛程</el-menu-item>
          <el-menu-item index="/item">单项赛程</el-menu-item>
        </el-submenu> -->
          </el-menu>
        </el-col>
        <el-col :span="3" class="col-3-select">
          <div>
            <el-select
              v-model="activeGroup"
              popper-class="common-select"
              :popper-append-to-body="true"
              @change="setActiveGroup"
            >
              <el-option
                v-for="item in groupList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="layout-footer">
      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Storage from '@/assets/js/storage'
import Util from '@/assets/js/util'
export default {
  created() {
    this.activeGroup = Util.isEmpty(Storage.get('activeGroup'))
      ? 'intelligence'
      : Storage.get('activeGroup')
      
    Storage.set('activeGroup', this.activeGroup)
  },
  data() {
    return {
      menuActive: '/scheduel/overview',
      activeGroup: 'intelligence',
      groupList: [
        {
          label: '正式比赛',
          value: 'intelligence'
        },
        {
          label: '大众公开组',
          value: 'public'
        },
        // {
        //   label: '表演项目',
        //   value: 'perform'
        // }
      ]
    }
  },
  watch: {
    activeGroup(newVal, oldVal) {
      Storage.set('activeGroup', newVal)
    }
  },
  computed: {
    defaultActive() {
      if (this.$route.path.includes('report')) {
        return '/item'
      } else {
        return '/' + this.$route.path.split('/').reverse()[0]
      }
    }
  },
  filters: {},
  components: {},
  methods: {
    handleSelect(key, keyPath) {
      if (keyPath.length > 1) {
        this.menuActive = keyPath.join('/')
      }
    },
    setActiveGroup() {
      this.$emit('getGroupData', this.activeGroup)
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
